<script setup lang="ts">
import { onMounted, onUnmounted, ref, reactive } from 'vue'
import titleBar from '../../components/TitleBar/TitleBar.vue'
// 获取 container 元素
const containerRef = ref<HTMLElement | null>(null)
const titleBarRef = ref<HTMLElement | null>(null)
// 监听窗口大小变化
function handleResize() {
  // 如果容器存在
  if (containerRef.value) {
    // 获取窗口高度
    const viewportHeight = window.innerHeight
    // 获取子组件 titleBar 的高度
    const titleBarHeight = titleBarRef.value.$el.offsetHeight
    // 设置容器高度为窗口高度
    containerRef.value.style.height = `${viewportHeight - titleBarHeight}px`
  }
}

const a = 'b'

const form = reactive({
  name: '',
  region: ''
})

const onSubmit = () => {
  console.log('submit!')
}
onMounted(() => {
  // 监听窗口大小变化事件
  window.addEventListener('resize', handleResize)
  // 初始化设置高度
  handleResize()
})

onUnmounted(() => {
  // 移除窗口大小改变事件监听器
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <titleBar ref="titleBarRef" type="center">标题</titleBar>
  <div ref="containerRef" class="login">
    <el-form class="login-form" :model="form" label-width="auto">
      <el-form-item label="账  号">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="密  码">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @submit.prevent="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 100%;
  //-webkit-app-region: drag;
  .login-form {
    padding: 20px;
    margin: 0 auto;
    //width: 500px;
  }
}
</style>
